<template>
	<view class="u-wrap">
		<u-search placeholder="搜索" v-model="keyword" inputAlign="center" :show-action="false" shape="square" bgColor="white" @custom="search" @search="search"></u-search>
		<!-- <view class="meituan">
			<view class="content">
				<view class="left">
					<view class="sum">
						￥
						<text class="num">?</text>
					</view>
					<view class="type">现金券</view>
				</view>
				<view class="centre">
					<view class="title">1.点击商品跳转拼多多领取优惠券</view>
					<view class="title">2.再点击此处领取额外的现金券</view>
					<view class="valid-date">每人每日限领三次</view>
				</view>
			</view>
		</view> -->
		<u-sticky bgColor="#fff" offset-top="-90" customNavHeight=0 style="top: 0rpx">
			<u-tabs :list="list1" :current=current @change="click"></u-tabs>
		</u-sticky>
		<!--  -->
		<u-waterfall v-model="items" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="getDetail(item.goods_sign, item.mall_name, item.min_group_price_yuan, item.coupon_discount_yuan, item.goods_image_url, item.cash_gift_yuan)">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.goods_image_url" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.goods_name}}
					</view>
					<view class="demo-price">
						原价: {{item.min_group_price_yuan}}元
					</view>
					<view class="demo-price">
						优惠券:{{item.coupon_discount_yuan}}元
					</view>
					<view class="demo-price">
						礼金:{{item.cash_gift_yuan}}元
					</view>
					<view class="demo-price">
						最终价格:{{ (item.min_group_price_yuan - item.coupon_discount_yuan - item.cash_gift_yuan).toFixed(2) }}元
					</view>
					<view class="demo-tag">
						<view class="demo-tag-owner" v-if="item.merchant_type == 2">
							企业店
						</view>
						<view class="demo-tag-owner" v-else-if="item.merchant_type == 3">
							旗舰店
						</view>
						<view class="demo-tag-owner" v-else-if="item.merchant_type == 4">
							专卖店
						</view>
						<view class="demo-tag-owner" v-else-if="item.merchant_type == 5">
							专营店
						</view>
						<view class="demo-tag-text">
							已卖{{ formatSalesTip(item.sales_tip) }}件
						</view>
					</view>
					<view class="demo-shop">
						{{ item.mall_name }}
					</view>
					<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="getDetail(item.goods_sign, item.mall_name, item.min_group_price_yuan, item.coupon_discount_yuan, item.goods_image_url, item.cash_gift_yuan)">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.goods_image_url" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.goods_name}}
					</view>
					<view class="demo-price">
						原价: {{item.min_group_price_yuan}}元
					</view>
					<view class="demo-price">
						优惠券:{{item.coupon_discount_yuan}}元
					</view>
					<view class="demo-price">
						礼金:{{item.cash_gift_yuan}}元
					</view>
					<view class="demo-price">
						最终价格:{{ (item.min_group_price_yuan - item.coupon_discount_yuan - item.cash_gift_yuan).toFixed(2) }}元
					</view>
					<view class="demo-tag">
						<view class="demo-tag-owner" v-if="item.merchant_type == 2">
							企业店
						</view>
						<view class="demo-tag-owner" v-else-if="item.merchant_type == 3">
							旗舰店
						</view>
						<view class="demo-tag-owner" v-else-if="item.merchant_type == 4">
							专卖店
						</view>
						<view class="demo-tag-owner" v-else-if="item.merchant_type == 5">
							专营店
						</view>
						<view class="demo-tag-text">
							已卖{{ formatSalesTip(item.sales_tip) }}件
						</view>
					</view>
					<view class="demo-shop">
						{{ item.mall_name }}
					</view>
					
					<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="getList()"></u-loadmore>
		<u-popup v-model="showQRCode" mode="center" width="80%" height="auto">
			<view class="qr-popup">
				<u-icon name="close" class="close-icon" size="40" @click="showQRCode = false"></u-icon>
				<view class="qr-content">
					<view class="qr-tip">请长按二维码图进入拼多多官方小程序查看商品详情</view>
					<image :src="qrCodeUrl" mode="widthFix" style="width: 100%;"></image>
					<view class="cash-gift-notice">
						礼金只能用在该商品且五分钟内下单有效，每天只能领2次礼金，请先长按二维码查看商品详情，确认购买后，再点击礼金
					</view>
					<view class="cash-gift-btn" @click="getGift()">
						领取{{ currentCashGift }}元礼金
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list1: [
				{ name: '食品' },
				{ name: '百货' },
				{ name: '母婴' },
				{ name: '女装' },
				{ name: '美妆' },
				{ name: '水果' },
				{ name: '男装' },
				{ name: '医药' },
				{ name: '鞋包' },
				{ name: '内衣' },
				{ name: '电器' },
				{ name: '家纺' },
				{ name: '文具' },
				{ name: '运动' },
				{ name: '汽车' },
				{ name: '家装' },
				{ name: '家具' }
			],
			keyword: "",
			current: 0,
			items: [],
			opt_id: 1,
			loadStatus: 'loadmore',
			user_id: '',
			showQRCode: false,
			qrCodeUrl: '',
			currentCashGift: 0,
			currentGoodsSign: ''
		}
	},
	onLoad() {
		console.log(localStorage.getItem('user_id'));
		if (localStorage.getItem('user_id') == "" || localStorage.getItem('user_id') == null) {
			let user_id = this.generateUniqueString();
			localStorage.setItem('user_id', user_id);
		}
		this.user_id = localStorage.getItem('user_id');
		this.getList();
	},
	onReachBottom() {
		this.getList();
	},
	methods: {
		formatSalesTip(salesTip) {
		  // 如果 salesTip 是空字符串，则返回 "0"
		  return salesTip || "0";
		},
		generateUniqueString() {
		    let timestamp = Date.now();
		    let randomNum = Math.random();
		    return timestamp + '-' + randomNum;
		},
		getDetail(goodsSign, mall_name, min_group_price_yuan, coupon_discount_yuan, goods_image_url, cash_gift_yuan) {
			localStorage.setItem("goods_sign", goodsSign);
			localStorage.setItem("mall_name", mall_name);
			localStorage.setItem("min_group_price_yuan", min_group_price_yuan);
			localStorage.setItem("coupon_discount_yuan", coupon_discount_yuan);
			localStorage.setItem("goods_image_url", goods_image_url);
			localStorage.setItem("cash_gift_yuan", cash_gift_yuan);
			this.currentCashGift = cash_gift_yuan;
			this.currentGoodsSign = goodsSign;
			var that = this;
			uni.request({
			  url: 'https://data.bingdou.site/server/waimai/index/getPddDetail',
			  method: 'POST',
			  data: {
				  'goods_sign': goodsSign,
				  'user_id': that.user_id
			  },
			  header: {
				'content-type': 'application/json'
			  },
			  success (res) {
				  that.qrCodeUrl = res.data.data.url;
				  that.showQRCode = true;
			  }
			})
		},
		getGift() {
			var that = this;
			uni.request({
			  url: 'https://data.bingdou.site/server/waimai/index/getPddDetail',
			  method: 'POST',
			  data: {
				  'goods_sign': that.currentGoodsSign,
				  'gift': 1
			  },
			  header: {
				'content-type': 'application/json'
			  },
			  success (res) {
				  window.location.href=res.data.data.url;
			  }
			})
		},
		click(index) {
			console.log('index', index);
			this.keyword = "";
			this.current = index;
			this.items = [];
			this.$refs.uWaterfall.clear();
			switch(index) {
				case 0:
					this.opt_id = 1;
					break;
				case 1:
					this.opt_id = 15;
					break;
				case 2:
					this.opt_id = 4;
					break;
				case 3:
					this.opt_id = 14;
					break;
				case 4:
					this.opt_id = 16;
					break;
				case 5:
					this.opt_id = 13;
					break;
				case 6:
					this.opt_id = 743;
					break;
				case 7:
					this.opt_id = 3279;
					break;
				case 8:
					this.opt_id = 1281;
					break;
				case 9:
					this.opt_id = 1282;
					break;
				case 10:
					this.opt_id = 18;
					break;
				case 11:
					this.opt_id = 811;
					break;
				case 12:
					this.opt_id = 2478;
					break;
				case 13:
					this.opt_id = 1451;
					break;
				case 14:
					this.opt_id = 2048;
					break;
				case 15:
					this.opt_id = 1917;
					break;
				case 16:
					this.opt_id = 2974;
					break;
			}
			this.list_id = '';
			this.getList();
		},
		
		search(value) {
			console.log(value);
			this.keyword = value;
			this.$refs.uWaterfall.clear();
			this.getList();
			this.list_id = '';
		},
		getList() {
			var that = this;
			uni.request({
			  url: 'https://data.bingdou.site/server/waimai/index/listXiangce', //仅为示例，并非真实的接口地址
			  method: 'POST',
			  data: {
				  'cash_gift': 1,
				  'opt_id': this.opt_id,
				  'page': 1,
				  'page_size': 10,
				  'keyword': this.keyword,
				  'list_id': ''
			  },
			  header: {
				'content-type': 'application/json' // 默认值
			  },
			  success (res) {
				  console.log(res);
				  that.items.push(...res.data.data.goods_list);
				  that.list_id = res.data.data.list_id;
			  }
			})
		}
	}
};
</script>


<style lang="scss" scoped>
.u-sticky {
	top: 0;
}
.meituan {
	margin: 30rpx auto;
	background-color: #ffffff;
	width: 700rpx;
	color: $u-type-warning;
	font-size: 28rpx;
	.content {
		display: flex;
		align-items: center;
		padding: 80rpx 20rpx;
		border: 10rpx;
		background-color: #fff5f4;
		.left {
			.sum {
				font-size: 32rpx;
				.num {
					font-size: 60rpx;
					font-weight: bold;
				}
			}
		}
		.centre {
			margin-left: 40rpx;
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: $u-main-color;
				margin-bottom: 20rpx;
			}
		}
	}
}
</style>
<style lang="scss" scoped>
page {
	// overflow-x: hidden; /* 禁止横向滚动 */
	width: 100vw; /* 确保页面宽度为视口宽度 */
	height: 100%;
	background-color: rgb(244, 244, 244);
}
uni-page-head {
	display: none;
}
.u-wrap {
	padding-bottom: 30rpx;
}

.meituan {
	margin: 30rpx auto;
	background-color: #ffffff;
	width: 700rpx;
	color: $u-type-warning;
	font-size: 28rpx;
	.content {
		display: flex;
		align-items: center;
		padding: 80rpx 20rpx;
		border: 10rpx;
		background-color: #fff5f4;
		.left {
			.sum {
				font-size: 32rpx;
				.num {
					font-size: 60rpx;
					font-weight: bold;
				}
			}
		}
		.centre {
			margin-left: 40rpx;
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: $u-main-color;
				margin-bottom: 20rpx;
			}
		}
	}
}

.taobao {
	margin-top: 40rpx;
	width: 700rpx;
	background-color: white;
	padding: 30rpx 20rpx 20rpx;
	border-radius: 20rpx;
	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		font-size: 30rpx;
		.left {
			display: flex;
			align-items: center;
		}
		.store {
			font-weight: 500;
		}
	}
	.ticket {
		display: flex;
		.left {
			width: 70%;
			padding: 30rpx 20rpx;
			background-color: rgb(255, 245, 244);
			border-radius: 20rpx;
			border-right: dashed 2rpx rgb(224, 215, 211);
			display: flex;
			.picture {
				width: 100%;
				border-radius: 20rpx;
			}
			.introduce {
				margin-left: 10rpx;
				.goods-name {
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				.top{
					color: $u-type-warning;
					font-size: 28rpx;
					.big{
						font-size: 60rpx;
						font-weight: bold;
						margin-right: 10rpx;
					}
					.discount {
						font-size: 28rpx;
						color: $u-type-info-dark;
					}
				}
				.original-price {
					font-size: 24rpx;
					color: $u-type-info-dark;
					text-decoration: line-through;
					margin-top: 10rpx;
				}
				.coupon-price {
					font-size: 28rpx;
					color: $u-type-warning;
					margin-top: 10rpx;
				}
				.type {
					font-size: 28rpx;
					color: $u-type-info-dark;
					margin-top: 10rpx;
				}
				.date {
					margin-top: 10rpx;
					font-size: 20rpx;
					color: $u-type-info-dark;
				}
			}
		}
		.right {
			width: 30%;
			padding: 40rpx 20rpx;
			background-color: rgb(255, 245, 244);
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			.use {
				height: auto;
				padding: 0 20rpx;
				font-size: 24rpx;
				border-radius: 40rpx;
				color: #ffffff!important;
				background-color: $u-type-warning!important;
				line-height: 40rpx;
				color: rgb(117, 142, 165);
				margin-left: 20rpx;
			}
		}
	}
}
</style>
<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}
	
	.demo-tag {
		display: flex;
		margin-top: 5px;
	}
	
	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.demo-price {
		font-size: 25rpx;
		color: $u-type-error;
		margin-top: 5px;
	}
	
	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>

<style lang="scss" scoped>
.qr-popup {
	padding: 30rpx;
	position: relative;
	
	.close-icon {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		z-index: 1;
	}
	
	.qr-content {
		padding-top: 30rpx;
		text-align: center;
	}
	
	.qr-tip {
		margin-bottom: 20rpx;
		color: #333;
		font-size: 28rpx;
	}

	.cash-gift-notice {
		margin: 30rpx 20rpx;
		color: #666;
		font-size: 24rpx;
		line-height: 1.5;
		text-align: left;
		background-color: #fff5f5;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.cash-gift-btn {
		margin-top: 20rpx;
		background-color: #ff2c3c;
		color: #fff;
		padding: 20rpx 40rpx;
		border-radius: 40rpx;
		display: inline-block;
		font-size: 28rpx;
		font-weight: bold;
	}
}
</style>